<template>
    <div class="useApp">
        <p><span>常用应用</span><span>更多</span></p>
   <el-row :gutter="24">
    <el-col :span="6"><img src="../../assets/组 14.png" /><div class="grid-content ep-bg-purple" @click="">考勤管理</div></el-col>
    <el-col :span="6"><img src="../../assets/组 15.png" /><div class="grid-content ep-bg-purple" @click="GoFile" >文档管理</div></el-col>
    <el-col :span="6"><img src="../../assets/组 16.png" /><div class="grid-content ep-bg-purple"  @click="GoPerson">人事管理</div></el-col>
    <el-col :span="6"><img src="../../assets/组 17.png" /><div class="grid-content ep-bg-purple" @click="">系统管理</div></el-col>
  </el-row>
    </div>
</template>

<script setup>
import router from '../../router/index.js'
const GoFile=()=>{
  router.push('/fileMan')
}
const GoPerson=()=>{
  router.push('/divMan')
}
// const GoFile=()=>{
//   router.push('/fileMan')
// }
// const GoFile=()=>{
//   router.push('/fileMan')
// }
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  margin-top: 40px;
  position: relative;
  text-align: center;
}
.el-col img{
  position: absolute;
  left:0px;
  top: -20px;
}
.grid-content {
  border-radius: 4px;
  max-height: 20px;
}
.useApp{
    width: calc(73% - 20px);
    background: #fff;
    height: 100px;
    float: left;
    margin-bottom: 10px;
    padding-right: 20px;
}
.useApp p{
    line-height: 20px;
    font-size: 12px;
    color: #797777;
    padding-left: 10px;
}
.useApp p span:nth-child(1){
    float: left;
    font-size: 14px;
}
.useApp p span:nth-child(2){
    float: right;
}
</style>
